<template>
  <div class="comfirmIndex">
    <div class="content">
      <div class="title">请选择查询部门的名称</div>
      <ul class="detailList">
        <li :class="[currentIndex === index ? 'current' : '']" v-for="(item, index) in data" :key="item.id" @click="chooseCurrentHandle(item, index)">{{ item.name }}</li>
      </ul>
      <div class="btn" :class="[currentIndex === '' ? 'disabled' : '']" @click="nextHandle">下一步</div>
    </div>
  </div>
</template>

<script>
import { saveLogs } from '@/api/logs.js'
export default {
  name: 'ComfirmIndex',
  data() {
    return {
      data: [
        {
          id: '1',
          name: '食品安全局',
        },
        {
          id: '2',
          name: '政府部门',
        },
        {
          id: '3',
          name: '其他',
        },
      ],
      currentIndex: '',
    }
  },
  methods: {
    chooseCurrentHandle(data, index) {
      this.currentIndex = index
    },
    nextHandle() {
      if (this.currentIndex === '') {
        this.$notify({ type: 'warning', message: '请选择需要查询的部门！' })
        return false
      }
      this.$router.push('/cancelIndex')
    },
  },
}
</script>

<style lang="scss" scoped>
@import '../assets/styles/color.scss';
.comfirmIndex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  background-color: $bg-color;
  .content {
    width: 300px;
    border-radius: 20px;
    background-color: #fff;
    font-size: 18px;
    text-align: center;
    .title {
      padding: 20px;
    }
    li {
      margin-bottom: 10px;
      padding: 10px;
      font-size: 16px;
      border-radius: 30px;
      box-shadow: 0px 1px 2px 0 rgba($color: #000000, $alpha: 0.5);
      border: 1px solid transparent;
      &.current {
        border-color: $theme-bg-color;
      }
    }
    .btn {
      padding: 10px;
      font-size: 16px;
      border-radius: 30px;
      color: #fff;
      background-color: $theme-bg-color;
      &.disabled {
        background-color: #666;
      }
    }
  }
}
</style>
